<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>
    <ImageUpload></ImageUpload>
    <!--    <input ref="fileRef" type="file"/>-->
  </div>
</template>

<script>
// const COS = require('cos-js-sdk-v5')
// // 导入模块得到cos对象
// const cos = new COS({
//   SecretId: 'AKIDWzLUPHwNZYLwNcEfsiNhmeJlzyiFdsvl',
//   SecretKey: 'gljU1ObtzwgBSYTuAC0aw4ygB2g6as05'
// })
import { mapGetters } from 'vuex'
import QrcodeVue from 'qrcode.vue'

export default {
  name: 'Dashboard',
  components: {
    QrcodeVue
  },
  data() {
    return {
      // 定义数据
      value: 'https://example.com',
      size: 100
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    // this.$refs.fileRef.onchange = function(e) {
    //   // 得到文件选择内容
    //   // console.log(e.target.files[0])
    //   // console.log(e.target === this)
    //   const file = this.files[0]
    //   cos.uploadFile({
    //     Bucket: 'system-1315685760', /* 桶名称 */
    //     Region: 'ap-chengdu', /* 存储桶所在地域，必须字段 */
    //     Key: Date.now() + file.name, /* 存储在桶里的对象键，文件名 */
    //     Body: file, // 上传文件对象
    //     SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
    //     onProgress: function(progressData) {
    //       console.log(JSON.stringify(progressData))
    //     }
    //   }, function(err, data) {
    //     if (err) {
    //       console.log('上传失败', err)
    //     } else {
    //       console.log('上传成功')
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
